<template>
    <a-row :gutter="20">
        <a-col :span="14">
            <!-- <a-button style="width: 100%;">添加辅助工具</a-button> -->
            <a-form :model="form" name="basic" :label-col="{ span: 8 }">
                <a-row>
                    <a-col :span="12">
                        <a-form-item label="选择工艺类型" name="craftType">
                            <a-select v-model:value="form.craftType" mode="multiple" placeholder="请选择工艺类型"
                                style="width: 200px">
                                <a-select-option v-for="item of craftData" :key="item">{{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="选择仪器系列" name="instrumentType">
                            <a-select v-model:value="form.instrumentType" mode="multiple" placeholder="请选择仪器系列"
                                style="width: 200px">
                                <a-select-option v-for="item of instrumentData" :key="item">{{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="选择辅助工具" name="auxiliaryTool">
                            <a-button type="primary" ghost style="width: 200px" @click="open">添加辅助工具</a-button>
                        </a-form-item>

                        <AntdConfirmModal title="添加辅助工具" ref="modalRef" width="800px">
                            <a-row>
                                <a-select ref="select" v-model:value="form.auxiliaryTool" style="width: 120px"
                                    @focus="focus">
                                    <a-select-option value="eccentric">偏心器</a-select-option>
                                    <a-select-option value="rubber">橡胶扶正器</a-select-option>
                                    <a-select-option value="mental">金属扶正器</a-select-option>
                                </a-select>
                            </a-row>
                            <a-divider></a-divider>
                            <eccentric-popup v-if="form.auxiliaryTool === 'eccentric'"></eccentric-popup>
                            <rubber-popup v-if="form.auxiliaryTool === 'rubber'"></rubber-popup>
                            <mental-popup v-if="form.auxiliaryTool === 'mental'"></mental-popup>
                        </AntdConfirmModal>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :push="1" :span="20">
                        <a-table :dataSource="dataSource" size="small" :columns="columns">
                            <template #bodyCell="{ column, text, record }">
                                {{ text }}
                            </template>
                        </a-table>
                    </a-col>
                </a-row>
            </a-form>
        </a-col>
        <a-col :span="10">
            <a-card>card</a-card>
        </a-col>
    </a-row>
</template>
<script setup>
import { craftList, instrumentList } from './craft'
import EccentricPopup from './type/EccentricPopup'
import RubberPopup from './type/RubberPopup'
import MentalPopup from './type/MentalPopup';
const craftDatas = ref(craftList)
const craftData = Object.values(craftDatas.value).map(item => item.name);
const instrumentDatas = ref(instrumentList)
const instrumentData = Object.values(instrumentDatas.value).map(item => item.name)
const modalRef = ref(null)
const form = ref({
    craftType: [],
    instrumentType: [],
    auxiliaryTool: 'eccentric'
})
const columns = [
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '待定',
        dataIndex: 'xxx',
        key: 'xxx',
    },
    {
        title: '个数',
        dataIndex: 'number',
        key: 'number',
    },
];
function open() {
    modalRef.value.openModal()
}
</script>